<template>
  <div id="order-detail">
    <div class='order-header'><i class="el-icon-d-arrow-right" style="color: #58B7FF; font-size: 12px;"></i> 订单详情</div>
    <div style="margin: 20px 0;">
      <table style="width: 100%;">
        <tr>
          <td class="info-title">订单号：</td>
          <td class="info-content">{{dataProvider.orderNo}}</td>
        </tr>
        <tr>
          <td class="info-title">姓名：</td>
          <td class="info-content">{{dataProvider.orderElement.customerName}}</td>
          <td class="info-title">手机号：</td>
          <td class="info-content">{{dataProvider.orderElement.telephoneNo}}</td>
        </tr>
        <tr>
          <td class="info-title">地址：</td>
          <td class="info-content">{{dataProvider.orderElement.province}} {{dataProvider.orderElement.city}}
            {{dataProvider.orderElement.county}} {{dataProvider.orderElement.address}}</td>
          <td class="info-title">机型：</td>
          <td class="info-content">{{dataProvider.brandName}} {{dataProvider.modelName}} {{dataProvider.deviceColor}}
          </td>
        </tr>
        <tr v-for="item in dataProvider.orderFailures" :key="item">
          <td class="info-title">故障：</td>
          <td class="info-content">{{item.failureSubName}}</td>
          <td class="info-title">估价：</td>
          <td class="info-content">{{item.price}}</td>
        </tr>
        <tr>
          <td class="info-title">服务方式：</td>
          <td class="info-content">{{dataProvider.serviceName}}</td>
          <td class="info-title">上门时间：</td>
          <td class="info-content">{{dataProvider.yyStr}}</td>
        </tr>
        <tr>
          <td class="info-title"></td>
          <td class="info-content">
            <el-button type="text" @click="cancelOrder">取消订单</el-button>
            <el-button v-if="showPayBtn" type="text" @click="updateOrderToYZF">已支付</el-button>
          </td>
        </tr>
      </table>
    </div>
    <!--<div class='order-header'><i class="el-icon-d-arrow-right" style="color: #58B7FF; font-size: 12px;"></i> 订单修改</div>-->
    <!--<div style="margin: 20px 0;">
      <table style="width: 100%;">
        <tr>
          <td class="info-title">订单号：</td>
          <td class="info-content"><el-input v-model="dataProviderCopy.orderNo"></el-input></td>
        </tr>
        <tr>
          <td class="info-title">姓名：</td>
          <td class="info-content"><el-input v-model="dataProviderCopy.orderElement.customerName"></el-input></td>
          <td class="info-title">手机号：</td>
          <td class="info-content"><el-input v-model="dataProviderCopy.orderElement.telephoneNo"></el-input></td>
        </tr>
        <tr>
          <td class="info-title">区域：</td>
          <td class="info-content">
            <city-cascader 
              :province="dataProviderCopy.orderElement.province"
              :city="dataProviderCopy.orderElement.city"
              :county="dataProviderCopy.orderElement.county">
            </city-cascader>
          </td>
          <td class="info-title">详细地址：</td>
          <td class="info-content"><el-input v-model="dataProviderCopy.orderElement.address"></el-input></td>
        </tr>
        <tr>
          <td class="info-title">机型：</td>
          <td class="info-content">
            <device-cascader :brand="dataProviderCopy.brandName" :model="dataProviderCopy.modelName" :color="dataProviderCopy.deviceColor"></device-cascader>
          </td>
          <td class="info-title">故障：</td>
          <td class="info-content">{{formatterFalt}}</td>
        </tr>
        <tr>
          <td class="info-title">估价：</td>
          <td class="info-content">
            <el-input v-model="dataProviderCopy.price"></el-input>
          </td>
          <td class="info-title">服务方式：</td>
          <td class="info-content">
            <el-select v-model="dataProviderCopy.serviceType" placeholder="请选择">
              <el-option label="上门" value="SM"></el-option>
              <el-option label="到店" value="DD"></el-option>
              <el-option label="寄送" value="JS"></el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <td class="info-title">上门时间：</td>
          <td class="info-content">{{dataProvider.yyStr}}</td>
        </tr>
      </table>
    </div>-->
  </div>

</template>
<script>
  import CityCascader from './order/CityCascader'
  import DeviceCascader from './order/DeviceCascader'
  import r from '../utils/RequestUtil';
  export default {
    name: "order_detail-sss",
    components: {
      CityCascader,
      DeviceCascader
    },
    data: function () {
      return {

      }
    },
    computed: {
      formatterFalt: function () {
        let orderFailures = this.dataProvider.orderFailures;
        let str = "";
        for (let i = 0; i < orderFailures.length; i++) {
          str += orderFailures[i].failureSubName + ";";
        }
        return str;
      },
      dataProviderCopy: function () {
        let newObject = {};
        return Object.assign(newObject, this.dataProvider);
        return newObject;
      },
      showPayBtn: function () {
        if (this.dataProviderCopy.payStatus === 'W') {
          return true;
        } else {
          return false;
        }
      }
    },
    methods: {
      updateOrderToYZF: function () {},
      cancelOrder: function () {
        this.$emit("cancelOrder", this.dataProviderCopy.orderNo);
      }
    },
    props: {
      dataProvider: {
        type: Object,
        required: true
      }
    },
  }

</script>

<style scoped="scoped">
  .item-wrap {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .label {
    font-size: 14px;
    width: 70px;
    padding: 0 8px;
    text-align: right;
  }

  .order-header {
    border-bottom: 2px solid #1D8CE0;
    padding: 5px 0;
  }

  .info-title {
    padding: 0 5px 0 10px;
  }

  .info-title {
    text-align: right;
  }

  .info-content {
    text-align: left;
    padding-right: 10px;
  }

  tr {
    height: 40px;
  }

  .el-select {
    width: 100%;
  }

</style>
